<template>
  <div class="result-container">
    <!-- 导航栏 -->
    <van-nav-bar
      :title="q + '搜索的结果'"
      left-arrow
      fixed
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->

    <!-- 文章列表 -->
    <van-list
      class="article-list"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.art_id" :title="item.title" />
    </van-list>
    <!-- /文章列表 -->
  </div>
</template>

<script>
import { searchResult } from '../../../api/result'
export default {
  name: 'SearchResult',
  data () {
    return {
      list: [], // 数据列表
      loading: false, // 是否正在加载
      finished: false, // 是否加载完毕
      q: '', // 搜索的关键字
      page: 1, // 页数
      per_page: 5 // 每页几条
    }
  },
  /* eslint-disable */
  created () {
    this.q = this.$route.query.q
  },
  methods: {
    onLoad () {
      const { q, page, per_page } = this
      searchResult({ q, page, per_page }).then(res => {
        this.loading = false
        this.list.push(...res.data.data.results)
        if (this.list.length >= res.data.data.total_count) {
          this.finished = true
        }
        this.page++
      })
    }
  }
}
</script>

<style lang="less">
.result-container {
  .article-list {
    margin-top: 39px;
  }
  .van-nav-bar {
    background-color: #3296fa;
    .van-nav-bar__title {
      color: white;
    }
    .van-icon {
      color: white;
    }
  }
}
</style>
